<template>
  <div class="detail">
    <!-- 1.0 文章详情头部 -->
    <div class="header">
      <div
        class="header_back"
        @click="$router.back()"
      >
        <i class="iconfont iconjiantou2"></i>
        <span class="iconfont iconnew"></span>
      </div>
      <!-- 关注按钮
        1. 用户没有关注的情况下，文字提示为：关注，红色的
        2. 已经关注的情况下，文字提示为：已关注，白色的
      -->
      <div
        class="follow_btn"
        :class="detail.has_follow ? 'active' : ''"
        @click="followHandle"
      >
        {{ detail.has_follow ? '已关注' : '关注' }}
      </div>
    </div>
    <!-- 2.0 文章详情内容 -->
    <!-- 情况1：type===1 的时候渲染新闻详情 -->
    <!-- hidden 属性可以临时隐藏某个结构，方便开发调试 -->
    <div
      v-if="detail.type === 1"
      class="news"
    >
      <h1 class="title">{{ detail.title }}</h1>
      <div class="author">
        <span class="author_name">{{ detail.user.nickname }}</span>
        <span class="author_date">{{ detail.create_date.slice(0,10) }}</span>
      </div>
      <!-- 字符串渲染成 html 结构用 v-html -->
      <div
        class="content"
        v-html="detail.content"
      ></div>
    </div>
    <!-- 情况2：type===2 的时候渲染视频详情 -->
    <div
      v-else-if="detail.type === 2"
      class="video"
    >
      <!-- 服务器返回的视频地址做了防盗功能 -->
      <!-- <video :src="detail.content"></video> -->
      <!-- 开发的时候，临时放一个视频测试 -->
      <!-- 1.0 竖着的视频 -->
      <!-- <video
        class="video_main"
        controls
        src="https://video.pearvideo.com/mp4/adshort/20201217/cont-1712118-15534037_adpkg-ad_hd.mp4"
      ></video> -->
      <!-- 2.0 横视频 -->
      <video
        class="video_main"
        controls
        :poster="detail.cover[0].url"
        src="https://video.pearvideo.com/mp4/adshort/20201231/cont-1714376-15555367_adpkg-ad_hd.mp4"
      ></video>
      <div class="author">
        <div class="author_info">
          <img
            v-if="detail.user.head_img"
            :src="$baseURL + detail.user.head_img"
            alt=""
            class="author_avator"
          >
          <img
            v-else
            src="@/assets/logo.png"
            alt=""
            class="author_avator"
          >
          <span class="author_name">{{ detail.user.nickname }}</span>
        </div>
        <div
          class="follow_btn"
          :class="detail.has_follow ? 'active' : ''"
          @click="followHandle"
        >
          {{ detail.has_follow ? '已关注' : '关注' }}
        </div>
      </div>
      <h1 class="video_title">{{ detail.title }}</h1>
    </div>
    <!-- 3.0 按钮组 -->
    <div class="btn_group">
      <!-- 3.1 点赞按钮 -->
      <div
        class="btn_like"
        :class="detail.has_like ? 'active' : ''"
        @click="postLikeHandle"
      >
        <i class="iconfont icondianzan"></i>
        <span>{{ detail.like_length }}</span>
      </div>
      <div class="btn_weixin">
        <i class="iconfont iconweixin"></i>
        <span>微信</span>
      </div>
    </div>
    <!-- 用于分隔模块的类名 -->
    <div class="divider"></div>
    <!-- 4.0 文章跟帖 -->
    <div class="comment">
      <h2 class="comment_title">精彩跟帖</h2>
      <!-- 情况1：文章有评论，展示评论 -->
      <div
        v-if="commentList.length > 0"
        class="comment_list"
      >
        <!-- 使用父评论组件，v-for 渲染评论列表，组件内部自动渲染父评论 -->
        <CommentMain
          v-for="item in commentList"
          :key="item.id"
          :commentData="item"
        />
        <span
          class="comment_more"
          @click="$router.push(`/comment/${detailId}`)"
        >更多跟帖</span>
      </div>
      <!-- 情况2：没有评论内容，展示空提示 -->
      <div
        v-else
        class="comment_empty"
      >
        暂无跟帖，抢占沙发🎈
      </div>
    </div>
    <!-- 5.0 底部的评论回复组件 -->
    <CommentSend
      @updataComment="getPostCommentData"
      :detailId="detailId"
    />

    <!-- Vant 的模态框 -->
    <van-dialog
      v-model="loginShow"
      title="亲，你没有登录"
      cancel-button-text="残忍拒绝"
      confirm-button-text="去登录"
      show-cancel-button
      @confirm="goToLogin"
    >
    </van-dialog>
  </div>
</template>

<script>
import {
  addUserFollowsById,
  getPostById,
  getPostCommentById,
  removeUserFollowsById,
  updatePostLikeById,
} from "@/api";
import { getToken } from "@/utils/myToken";
// 导入父评论组件
import CommentMain from "@/components/Comment/Main.vue";
import CommentSend from "@/components/Comment/Send.vue";
export default {
  components: {
    // 注册父评论组件
    CommentMain,
    CommentSend,
  },
  data() {
    return {
      // 文章详情
      detail: {},
      detailId: 0,
      isLogin: false,
      loginShow: false,
      commentList: [],
    };
  },
  created() {
    // 获取动态路由中文章 id
    const { id } = this.$route.params;
    this.detailId = id;
    // 获取本地存储中是否有 token 判断用户是否已经登录
    this.isLogin = getToken() ? true : false;
    // 根据文章ID获取到文章的详情
    getPostById(id).then((res) => {
      // console.log(res);
      // 把文章详情更新到 data 中
      this.detail = res.data.data;
    });
    this.getPostCommentData();
  },
  methods: {
    getPostCommentData() {
      // 获取评论列表
      getPostCommentById(this.detailId).then((res) => {
        // console.log("getPostCommentById", res.data);
        // 对返回的评论列表数据进行 slice() 提取前 3 条即可
        this.commentList = res.data.data.slice(0, 3);
      });
    },
    // 点赞按钮被点击了
    postLikeHandle() {
      // 1.0 获取是否已经登录 - 如果没有登录
      if (this.isLogin === false) {
        // 2.0 未登录 - 弹出提示框 - 提示继续看看，还是去登录页登录
        this.loginShow = true;
        return;
      }
      // 3.0 已经登录 - 正常点赞
      // 发送请求是用于后端更新数据库的数据
      updatePostLikeById(this.detailId).then((res) => {
        const { message } = res.data;
        console.log("点赞按钮被点击了", message);
        // 还需要再更新前端的视图
        if (message === "点赞成功") {
          // 点赞数在视图中更新
          this.detail.like_length += 1;
          // 点赞按钮的样式在视图中更新
          this.detail.has_like = true;
        } else if (message === "取消成功") {
          this.detail.like_length -= 1;
          this.detail.has_like = false;
        }
      });
    },
    // 点击了确认，跳转去登录页
    goToLogin() {
      // 注意：原本的登录页，在登录成功后都是返回了个人中心，现在要完善登录成功后，返回原本的页面
      // this.$router.push("/login");
      this.$router.push({
        // 固定用法，需要通过 name 指定登录页组件
        name: "Login",
        // 在跳转到登录页的时候，同时把当前页面的路径传递过去
        params: { target: this.$route.path },
      });
    },
    // 点击 关注按钮：要考虑是否已经登录，还要通过判断实现关注和取消关注
    followHandle() {
      // 1.0 获取是否已经登录 - 如果没有登录，就弹出登录提示框
      if (this.isLogin === false) {
        this.loginShow = true;
        return;
      }
      // 2.0 实现关注 和 取消关注功能
      // 🧨 注意：关注和 取消关注 是 两个接口，所以需要先判断当前用户的关注情况
      const userId = this.detail.user.id;
      // 情况1：已经关注的
      if (this.detail.has_follow === true) {
        // 注意传参：切记，这里需要传递的是用户 id，不是文章 id
        removeUserFollowsById(userId).then((res) => {
          // console.log(res.data);
          this.$toast(res.data.message);
          // 更新前端视图
          this.detail.has_follow = false;
        });
      }
      // 情况2：未关注的
      else {
        addUserFollowsById(userId).then((res) => {
          this.$toast(res.data.message);
          // 更新前端视图
          this.detail.has_follow = true;
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.comment {
  // 样式微调
  padding-bottom: 120px;
  background-color: #f8fcff;
  .comment_title {
    font-size: 16px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .comment_list {
    padding-bottom: 50px;
    .comment_more {
      width: 120px;
      height: 30px;
      border: 1px solid #ccc;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px auto 0;
      font-size: 13px;
    }
  }
  // 空列表
  .comment_empty {
    font-size: 13px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
// 视频的布局
.video {
  .video_title {
    font-size: 16px;
    padding: 0 15px;
    font-weight: normal;
  }
  .video_main {
    width: 100%;
    // 最大高度
    max-height: 500px;
  }

  .author {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    .author_info {
      display: flex;
      align-items: center;
      .author_avator {
        width: 25px;
        height: 25px;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 50%;
      }

      .author_name {
        margin-left: 5px;
        font-size: 13px;
        color: #666;
      }
    }
  }
}
// 按钮组
.btn_group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 50px;
  .btn_like,
  .btn_weixin {
    width: 80px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 点赞按钮的选中状态
  .btn_like.active {
    color: #ff7a00;
    border-color: #ff7a00;
  }
  .iconfont {
    margin-right: 3px;
  }
  .iconweixin {
    color: #00c800;
  }
}
// 关注按钮到时候复用起来，所以样式定义到外面
.follow_btn {
  width: 62px;
  height: 26px;
  border-radius: 13px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  // 默认状态是红色的按钮
  background-color: red;
  border: 1px solid red;
  color: #fff;
  // 如果已经关注的话，就是白色按钮
  &.active {
    background-color: transparent;
    border-color: #ddd;
    color: #333;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  border-bottom: 1px solid #ccc;
  padding: 0 15px;
  .header_back {
    display: flex;
    align-items: center;
    .iconjiantou2 {
      font-size: 20px;
    }

    .iconnew {
      font-size: 45px;
    }
  }
}
.news {
  padding: 10px;
  .title {
    font-size: 18px;
  }

  .author {
    margin: 5px 0;
    font-size: 12px;
    color: #999;
    .author_name {
      margin-right: 10px;
    }
  }

  // 🚩 /deep/ 深度修改，可以用于修改没有 data-v-xxx 元素的样式
  /* PS: 如果用 Sass 处理器深度修改样式用 >>> */
  /deep/ .content {
    .photo {
      // 图片下方的文字说明
      span {
        display: flex;
        justify-content: center;
        color: #666;
        font-size: 12px;
        margin: 3px 0;
      }
    }
    img {
      width: 100%;
    }
    p {
      text-indent: 2em;
      // 上下 margin 会自动合并，段落间的排列更好看
      margin: 10px 0;
      // 行高其实是用于掉多行文字的间距
      line-height: 1.5;
    }
  }
}
</style>